import * as THREE from "three";
import { Loader } from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export function threeJsHooks() {
  let w = window.innerWidth;
  let h = window.innerHeight;

  // 创建场景
  const scene = new THREE.Scene();
  // 相机
  // fov 视野
  // appect 宽高比
  // near 近截面
  // far 远截面
  const fov = 75;
  const aspect = w / h;
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 5;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({
    // 抗锯齿
    antialias: true,
  });

  renderer.setSize(w, h);
  document.querySelector
  document.body.appendChild(renderer.domElement);
  
  const earthGroup = new THREE.Group();
  earthGroup.rotation.z = -23.4 * Math.PI / 180;

  // 创建控制器  
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
 controls.dampingFactor = 0.03
 const loader = new THREE.TextureLoader(); 
 // 创建几何体
  const geo = new THREE.IcosahedronGeometry(1,12);
  // 材质
  const mat = new THREE.MeshStandardMaterial({
    map: loader.load("src/assets/images/earth.jpg")
  });

  const earthMesh = new THREE.Mesh(geo, mat);
  earthGroup.add(earthMesh);
  

  const lightsMat = new THREE.MeshBasicMaterial({
    map: loader.load("src/assets/images/earthlights1k.jpg"),
    blending: THREE.AdditiveBlending
  });
  const lightMesh = new THREE.Mesh(geo, lightsMat);
  earthGroup.add(lightMesh)

//   const cloudMat = new THREE.MeshBasicMaterial({
//     map: loader.load("src/assets/images/earthcloudmaptrans.jpg"),
//     blending: THREE.AdditiveBlending
//   });
//   const cloudMesh = new THREE.Mesh(geo, cloudMat);
//   cloudMesh.scale.setScalar(1.003)
//   earthGroup.add(cloudMesh)

  scene.add(earthGroup)
//   const stars = getStarfield({ numStars: 2000})
//   scene.add(stars)
//   const wireMat = new THREE.MeshBasicMaterial({
//     color: 0xffffff,
//     wireframe: true
//   });
//   const wireMesh = new THREE.Mesh(geo, wireMat);
//   wireMesh.scale.setScalar(1.001);
//   earthMesh.add(wireMesh);

  const sunlight = new THREE.DirectionalLight(0xffffff);
  sunlight.position.set(-2,0.5,2)
  scene.add(sunlight);

  const animate = () => {
    requestAnimationFrame(animate);
    // earthMesh.rotation.x += 0.005
    earthMesh.rotation.y += 0.002
    lightMesh.rotation.y += 0.002
    // cloudMesh.rotation.y += 0.002
    renderer.render(scene, camera);
    controls.update()
  }
  // 渲染器渲染 场景、相机
  const renderScene = () => {
    animate()
  }

  return {
    renderScene
  }
}
